<template>
	<view class="container-bottom-btns">
		<view class="form">
			<view class="form-column-item">
				<view class="label">真实姓名</view>
				<view class="content">
					<input v-model="form.realName" placeholder-class="placeholder-input" type="text"
						placeholder="请输入真实姓名" />
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">身份证号</view>
				<view class="content">
					<input v-model="form.idCard" placeholder-class="placeholder-input" type="idcard"
						placeholder="请输入身份证号" />
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">身份证照片</view>
				<view class="content" style="flex-direction: column;align-items: flex-start; ">
					<view class="tip">请见文字需清晰辨认，无遮挡或模糊。</view>
					<view class="idcard-images">
						<view class="image" @tap="uploadCard(1)">
							<image src="./static/images/idcard-back.png" v-if="!form.idCardFront" mode=""></image>
							<image :src="form.idCardFront | formatFile" v-else mode=""></image>
						</view>
						<view class="image" @tap="uploadCard(2)">
							<image src="./static/images/idcard-front.png" mode="" v-if="!form.idCardBack"></image>
							<image :src="form.idCardBack | formatFile" mode="" v-else></image>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="bottom-btn-wrapper">
			<SubmitBtn text="提交" :customStyle="{width: '690rpx'}" @tap="submit"></SubmitBtn>
		</view>
	</view>
</template>

<script>
	import UploadImages from '@/components/UploadImages/UploadImages.vue'
	import {
		applyRealName
	} from '@/api/user.js'
	import {
		uploadImage
	} from '../../utils/upload';
	import validate from '@/utils/validate.js'
	import {
		toast
	} from '../../utils/uni-api';
	import { mapGetters } from 'vuex'
	export default {
		components: {
			UploadImages
		},
		data() {
			return {
				form: {
					realName: '',
					idCard: '',
					idCardFront: '',
					idCardBack: ''
				}
			};
		},
		onLoad(){
			if(this.userInfo.realName){
				this.form.realName = this.userInfo.realName
				this.form.idCard = this.userInfo.idCard
				this.form.idCardFront = this.userInfo.idCardFront
				this.form.idCardBack = this.userInfo.idCardBack
			}
		},
		computed:{
			...mapGetters(['userInfo'])
		},
		methods: {
			uploadCard(type) {
				uploadImage(res => {
					if (type == 1) {
						this.form.idCardFront = res.message
					} else {
						this.form.idCardBack = res.message
					}
				}, 1)
			},
			submit() {
				if (!validate.isNotEmpty(this.form.realName, '真实姓名')) return
				if (!validate.isNotEmpty(this.form.idCard, '身份证号')) return
				if (!validate.isNotEmpty(this.form.idCard, '身份证号')) return
				// if(!validate.isIdCard(this.form.idCard, '身份证号')) return
				if (!validate.isNotEmpty(this.form.idCardFront, '身份证正面照片')) return
				if (!validate.isNotEmpty(this.form.idCardBack, '身份证反面照片')) return

				applyRealName(this.form).then(res => {
					toast(res.message);
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				})

			}
		}
	}
</script>

<style lang="scss">
	.sms-code {
		width: 163rpx;
		height: 52rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1rpx solid $theme-color;
		font-weight: normal;
		font-size: 25rpx;
		color: $theme-color;
	}

	.disabled {
		border: 1rpx solid #d1d1d1;
		color: #d1d1d1;
	}

	.agreement {
		padding: 40rpx 0 30rpx;
		font-size: 26rpx;

		.agree-text {
			color: $theme-color;
		}
	}

	.tip {
		font-weight: 500;
		font-size: 25rpx;
		color: #808080;
		padding-bottom: 35rpx;
	}

	.idcard-images {
		display: flex;
		justify-content: space-between;

		.image {
			width: 300rpx;
			height: 210rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.image:first-child {
			margin-right: 20rpx;
		}
	}
</style>